<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</body>
<style>
</style>
<script>
    let div = document.createElement("div")
    let div2 = document.createElement("div")
    // div.innerHTML = "111"
    // // div.setAttribute('id', '1')
    // document.body.append(div)
    let span = document.createElement("span")
    // div.append(span)
    // div.append("222")
    // console.log(document.all)
    // div.style.width = '200px'
    // div.setAttribute('style', 'background-color:pink; color:#fff;')
    // div.style.backgroundColor = '#fff'
    // div.style.color = '#fff'
    // div.style.setProperty('width','200px')
    // div.style.cssText = "background-color: red; width: 200px"
    // console.log(div.style)
    // document.body.append(div)
    // document.body.append(span)
    div.append(div2)
    div.append(span)
    console.log(div.outerHTML)
    div2.outerHTML  = '<span id="newSpan">11</span><p></p>'
    document.body.append(div)
    console.log(div.outerHTML)
    let style = document.createElement("style")
    style.innerHTML = 'body :not(.firstp,.thirdp) { color: blue; }'
    document.head.appendChild(style)
    console.log(window.getComputedStyle(document.getElementById('newSpan')).getPropertyValue('color'))

    // console.log(Object.keys(window.getComputedStyle(span,null))
    //     .filter(key => !(!isNaN(key) && String(key) === key)).map(key => `${key}:${window.getComputedStyle(span,null)[key]}`))
    // console.log(window.getComputedStyle(div).getPropertyValue('background-color'))
    // console.log(div.style.getPropertyValue('background-color'))
    // console.log(div.style.color)
    // console.log(window.getComputedStyle(span).getPropertyValue("width"))
    // console.log(document.currentScript)
    // console.log(window.matchMedia('(prefers-reduced-motion: no-preference)'))
    // console.log(div.__proto__)

    // function Human() {
    // }
    //
    // function SuperHero() {
    // }
    //
    // Human.prototype.speak = function () {
    //     return `${this.name} says hello.`;
    // };
    // Human.prototype = {
    //     get name() {
    //     },
    //     set name(value) {
    //     },
    //     speak: function () {
    //         return `${this.name} says hello.`;
    //     }
    // }
    //
    // SuperHero.prototype = {
    //     fly: "222",
    //     do: function () {
    //     }
    // }
    //
    // const superMan = new SuperHero();
    //
    // Object.setPrototypeOf(SuperHero.prototype, Human.prototype);
    // Object.setPrototypeOf(SuperHero, Human);
    // console.log("111", Object.getOwnPropertyDescriptor(Human.prototype, 'name'))

    // let obj = {
    //     prop: 42
    // };
    //
    // // 获取属性描述符
    // let descriptor = Object.getOwnPropertyDescriptor(obj, 'prop');
    //
    // // 检查configurable值
    // console.log(descriptor); // 对于直接定义的属性，默认是true
    //
    // // 尝试修改一个属性的configurable属性
    // Object.defineProperty(obj, 'prop', {
    //     value: 24,
    //     writable: false,
    //     configurable: false,
    //     enumerable: true
    // });
    //
    // // 再次获取属性描述符
    // descriptor = Object.getOwnPropertyDescriptor(obj, 'prop');
    //
    // // 再次检查configurable值
    // console.log(descriptor.configurable); // false
    //
    // function exampleFunction(a) {
    // }
    //
    // console.log(exampleFunction.length); // 2
    // console.log(exampleFunction.name); // "exampleFunction"
    // console.log(exampleFunction.prototype);
    //
    // console.log(Object.getOwnPropertyNames(exampleFunction));

    // const sp1_content = document.createTextNode("新的 span 元素的内容。");

    // let sp1 = document.createElement("span");
    // let p = document.createElement("p");
    // let div = document.createElement("div");
    // sp1.setAttribute("id", "oldSpan");
    // sp1.append(p)
    // let sp2 = document.createElement("span");
    // sp2.setAttribute("id", "newSpan");
    // div.append(sp2)
    // document.body.append(sp1)
    // console.log(document.body.replaceChild(sp2, sp1))
    // console.log(div.outerHTML)
</script>
</html>